<template>
  <div class="app">
    <el-header class="pro_header">
      <el-tag class="ml-2" type="info" size="large" style="width: 500px;height:50px;border-radius:10px;font-size: 15px;">
        数据库:1个，数据表:{{ basetotal }}张，数据字段:{{ total }}个
      </el-tag>
      <div style="display: none;">
        <databasetotal />
        <datasheettotal :total='basetotal' />
        <fieldtotal :total='total' />
      </div>
      <el-menu class="topMenu" :default-active="page" mode="horizontal">
        <el-menu-item class="toplist" v-for="item in topMenu" :key="item.component" :index="item.component"
          @click="openPage">
          <template #title>
            <span>{{ item.title }}</span>
          </template>
        </el-menu-item>
      </el-menu>
      <el-input placeholder="关键词" clearable style="width: 500px;border-radius:10px;"></el-input>
      <el-button type="primary" icon="el-icon-search"></el-button>
    </el-header>
    <el-container class="page-user">
      <el-aside width="200px" style="height: 100%;">
        <el-main class="filter">
          <el-button primary link>{{ search }}</el-button>
          <el-input placeholder="输入表名称" prefix-icon="el-icon-search" v-model="filterText" size="mini">
          </el-input>
          <div style="width: 600px;height: 100%;">
            <el-tree class="filter-tree" show-checkbox :data="menus" :filter-node-method="filterNode" ref="tree"
              @check="treecheck" @check-change="searchfrom">
            </el-tree>
          </div>
        </el-main>
      </el-aside>
      <el-main class="page-content has-sidebar" ref="table">
        <Suspense :database="database">
          <template #default>
            <component :is="page" />
          </template>
          <template #fallback>
            <el-skeleton :rows="3" />
          </template>
        </Suspense>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'
import { defineAsyncComponent } from 'vue'
import * as index from './../../../api/model/table'
import databasetotal from '../message/database.vue'
import datasheettotal from '../message/datasheet.vue'
import fieldtotal from '../message/field.vue'
export default {
  name: "dashboard",
  components: {
    database: defineAsyncComponent(() => import('../message/database.vue')),
    datasheet: defineAsyncComponent(() => import('../message/datasheet.vue')),
    field: defineAsyncComponent(() => import('../message/field.vue')),
    scSelectFilter,
    databasetotal,
    datasheettotal,
    fieldtotal
  },
  data() {
    return {
      total: '',
      basetotal: '',
      filterText: '',
      search: "筛选",
      icon: 'el-icon-DArrowRight',
      menus: [],
      tablename: '',
      val: 1,
      topMenu: [
        {
          id: 1,
          title: "数据库",
          component: "database"
        },
        {
          id: 2,
          title: "数据表",
          component: "datasheet"
        },
        {
          id: 3,
          title: "字段",
          component: "field"
        }
      ],
      page: "datasheet",
    }
  },
  created() {
    this.table();
  },
  watch: {
    tablenames(val) {
      this.$refs.listname.filter(val)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    list() {
      this.tablename;
    }
  },
  methods: {
    table() {
      index.table({ tableName: null, pageNum: 1, pageSize: 1000 }).then((response) => {
        for (this.val; this.val <= response.data.data.length; this.val++) {
          var temp = { "id": this.val, "label": response.data.data[this.val - 1].description, "table_name": response.data.data[this.val - 1].table_name }
          this.menus.push(temp);
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    searchfrom() {
      const checkedIdS = this.$refs.tree.getCheckedNodes()
      if (checkedIdS.length == 0) {
        this.tablename = null
      } else {
        this.tablename = checkedIdS[checkedIdS.length - 1].table_name
      }
      this.$Bus.emit('treecheck', this.tablename)
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    openPage(item) {
      this.page = item.index
    },
  },
}
</script>

<style>
.pro_header {
  height: 180px;
  background-color: rgba(208, 208, 208, 0.514);
  text-align: center;
}

.topMenu {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(208, 208, 208, 0);
  width: 515px;
  margin-left: 34%;
  margin-top: 0.5%;
}

.filterList {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.filter {
  height: 580px;

}
</style>